<template>
  <div class="layout">
    <Layout>
      <header>
        <MainHeader :menuList="rightMenuList"></MainHeader>
      </header>
      <Layout>
        <Sider hide-trigger :style="{background: '#fff'}">
          <Menu active-name="1-2"  theme="light" width="auto" :open-names="['1']">

            <div v-for="(item,index) in menuList" :key="index">
              <!--一级-->
              <Submenu v-if="item.children && item.children.length>0" :name="item.meta.title">
                <template slot="title">
                  <Icon :type="item.meta.icon"></Icon>
                  <span>{{item.meta.title}}</span>
<!--                  <script></script>-->
                </template>


                <!--二级-->
                <MenuItem
                  v-for="(itemChildren,index2) in item.children"
                  :name="itemChildren.meta.title"
                  :key="index2"
                  @click.native="turnToPage(itemChildren)">

                  <span>
                    <Icon :type="itemChildren.meta.icon"></Icon>
                    {{itemChildren.meta.title}}
                  </span>

                </MenuItem>

              </Submenu>

              <MenuItem v-else :name="item.meta.title" @click.native="turnToPage(item)">
                <Icon :type="item.meta.icon"></Icon>
                {{item.meta.title}}
              </MenuItem>

            </div>

<!--            <MenuItem v-for="(item,index) in menuList" :key="index" :name="item.meta.title" @click.native="turnToPage(item)">-->
<!--              <Icon :type="item.meta.icon"></Icon>-->
<!--              {{item.meta.title}}-->
<!--            </MenuItem>-->
          </Menu>
        </Sider>
        <Layout :style="{padding: '24px'}">
          <Card style="height: 100%">
            <Content :style="{background: '#fff'}">
                <router-view />
            </Content>
          </Card>
        </Layout>
      </Layout>
    </Layout>

    <!--修改框-->
    <Modal
      v-model="updateModal"
      @on-cancel="cancalTableForm('updateMsg')"
    >
      <div class="modalHeader" slot="header">
        <span>修改</span>
      </div>
      <div>
        <Form :model="formModal" ref="updateMsg" :rules="formMsgRule" :label-width="110">

          <span v-if="verification">
            <FormItem label="新密码：" prop="userPwd">
              <Input type="password" v-model="formModal.userPwd" placeholder="请输入新密码"/>
            </FormItem>
            <FormItem label="确认密码：" prop="userPwd2">
              <Input type="password" v-model="formModal.userPwd2" placeholder="请确认密码"/>
            </FormItem>
          </span>

          <span v-else>
            <FormItem label="旧密码：" prop="oldPwd">
              <Input type="password" v-model="formModal.oldPwd" placeholder="请输入新密码"/>
            </FormItem>
          </span>



        </Form>
      </div>
      <div slot="footer" class="userModalFooter">
        <Button icon="" type="default" @click="updateModal=false;cancalTableForm('updateMsg')">取消</Button>
        <Button v-if="verification" icon="" type="primary" @click="updateSubmit">保存</Button>
        <Button v-else  icon="" type="primary" @click="oldPwdVer">验证密码</Button>
      </div>
    </Modal>

  </div>
</template>
<script>
  import { mapState, mapMutations } from "vuex";
  import MainHeader from "./components/MainHeader";
  import Cookies from 'js-cookie';
  export default {
    components:{
        MainHeader
    },
    data(){
        const validateOld = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请确认密码'));
            } else {
                callback();
            }
        };
      const validatePass = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请确认密码'));
        } else {
            if(value === this.formModal.userPwd){
                callback();
            }else{
                callback(new Error('两次密码不同'));
            }

        }
      };
      return {
          updateModal:false,
          //旧密码是否验证通过
          verification:false,
          formModal:{
              oldPwd:'',
              userPwd:'',
              userPwd2:'',
          },
          formMsgRule:{
            oldPwd: [
              { required: true, message: '请验证密码', trigger: 'blur' },
              { validator: validateOld, trigger: "blur" },
            ],
            userPwd: [
              { required: true, message: '请填写密码', trigger: 'blur' },
            ],
            userPwd2: [
              { required: true, message: '请确认密码', trigger: 'blur' },
              { validator: validatePass, trigger: "blur" },
            ],
          },


          rightMenuList:[
              {name:"logOut",title:"退出登录",type:0,method:this.logOut},
              {name:"updatePwd",title:"修改密码",type:0,method:this.updatePwd},
          ],
      }
    },
    methods: {
      ...mapMutations(["updateMenuList"]),
      returnTitle(item){
        console.log(item);

        return item.meta.title;
      },
      turnToPage(menu) {
        // console.log(menu.name)
        this.$router.push({
            name:menu.name,
        });
      },
      //清除form数据
      cancalTableForm(name){
          // this.formItem.deviceID = null;
          this.$refs[name].resetFields();
      },
      logOut(){
          // console.log("退出登录")
          let that=this;
          this.$app.post('/tadmin/loginOut', {}).then((res)=>{
              if(res.data.code==0){
                  that.$app.setHeader('');

                  that.$Message.success("退出成功");
                  that.$router.push({
                      name: 'login'
                  });
              }
          });
          localStorage.menuList=[];
          localStorage.modulesArr=[];
          Cookies.remove('userName');
          Cookies.remove('userNick');

      },
      updatePwd(){
        this.updateModal=true;
      },
      oldPwdVer(){
        let that=this;
        this.$app.post('/tadmin/oldPwdVer', {
            oldPwd:btoa(that.formModal.oldPwd)
        }).then((res)=>{
            if(res.data.code==0){
              that.$Message.success("验证成功");
              that.verification=true;
            }else{
              that.$Message.error("验证失败");
            }
        });
      },
      //修改密码
      updateSubmit(){
          let that=this;
          this.$app.post('/tuser/updatePwd', {
              userPwd:btoa(that.formModal.userPwd)
          }).then((res)=>{
              if(res.data.code==0){
                  that.$Message.success("修改成功");
                  that.verification=false;

                  that.$app.setHeader('');

                  // that.$Message.success("退出成功");
                  that.$router.push({
                      name: 'login'
                  });
              }else{
                  that.$Message.error("修改失败");
              }
          });
      }
    },
    mounted() {
      this.$store.dispatch("getUserModules",{vm:this});
      //更新菜单列表
      // this.updateMenuList();

      // console.log(this.menuList);
    },
    computed: {
      ...mapState({ menuList: state => state.app.menuList })
    },
  }
</script>
<style lang="less" scoped>
  .layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
    .ivu-layout{
      height: 100%;
    }
    /*/deep/ .ivu-layout-header{*/
    /*  background: #2d8cf0;*/
    /*}*/

    .topRight{
      float: right;
    }
  }

  .layout-logo{
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
  }
  .layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
  }

  ::-webkit-scrollbar-track { background: #eee; border-radius: 5px; }
  ::-webkit-scrollbar { width: 10px; height: 10px; border-radius: 5px; }
  ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 5px}
  /deep/ .ivu-card-body{
    width: 100%;
    height: 100%;
    max-height: 55em;
  }
  .ivu-layout-content{
    overflow: auto;
    /**/
    /*重写滚动条样式*/
    height: 100%;
  }
  .ivu-layout-sider{
    overflow-y: scroll;

    &::-webkit-scrollbar{
      width: 0;
      border-radius: 0!important;
    }
  }
</style>
